<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>商品详情</h1>
        </header>
        
        <main>
            <div class="product-detail">
                <div class="product-detail-content">
                    <!-- 商品图片 -->
                    <div class="product-detail-image">
                        <!-- 这里可以添加商品图片 -->
                        <div class="placeholder-image">商品图片</div>
                    </div>
                    
                    <!-- 商品信息 -->
                    <div class="product-detail-info">
                        <h2>{{ product.name }}</h2>
                        <p class="product-detail-price">¥{{ product.price }}</p>
                        <p class="product-detail-barcode">条形码: {{ product.barcode }}</p>
                        <p class="product-detail-category">分类: {{ product.category.name }}</p>
                        <p class="product-detail-stock">库存: {{ product.inventory.quantity }}件</p>
                        
                        <div class="product-detail-description">
                            <h3>商品描述</h3>
                            <p>{{ product.description }}</p>
                        </div>
                        
                        <div class="product-detail-actions">
                            <button class="btn btn-primary">加入购物车</button>
                            <button class="btn btn-secondary">立即购买</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <footer>
            <p>&copy; 2025 超市管理系统 - 商品详情</p>
        </footer>
    </div>
    
    <script src="/static/js/main.js"></script>
</body>
</html>